<template>
 <div class="w-full h-screen box-border relative overflow-x-hidden overflow-y-auto"> 
  <div class="w-full h-[28vh] box-border p-8 home-bg">
    <span class="lang-btn" @click="showPicker = true">
      <span>{{ $t(lang) }}</span>
      <van-icon name="arrow" class="ml-[2px]" color="#000" />
    </span>
  </div>
  <van-notice-bar
    left-icon="volume-o"
    :text="$t('rechargeTips')"
    class="!mt-2"
    background="#fff9f2"
    color="#b36f6e"
  />
  <van-tabs v-model:active="active" class="!mt-2" title-active-color="#1989fa" @change="handleChange">
    <van-tab v-for="item in category" :title="item.name" :name="item.value" />
    <!-- <van-tab :title="$t('tabs.welfareChart')" /> -->
    <!-- <van-tab :title="$t('tabs.musicChart')" />
    <van-tab :title="$t('tabs.filmChart')" />
    <van-tab :title="$t('tabs.financeChart')" />
    <van-tab :title="$t('tabs.liveBroadcastChart')" /> -->
  </van-tabs>
  <van-config-provider :theme-vars="themeVars">
    <van-cell-group :border="false" inset class="!mb-16">
      <van-cell v-for="(item, i) in list" :key="item.id" :border="false" @click="handleClick(item.link)">
        <template #title>
          <div class="flex justify-start items-center gap-4 leading-[2rem]">
            <div 
              :class="{ 
                'text-red-500': i === 0, 
                'text-orange-500': i === 1,
                'text-orange-300': i === 2,
              }"
            >
              {{ i + 1 < 10 ? `0${i + 1}` : i + 1 }}
            </div>
           <div class="flex-1 flex flex-row justify-between items-center">
              <div class="flex gap-4">
              <img :src="item.images" class="rounded-lg w-[2.1rem] h-[2.1rem]"  />
                <span class="max-sm:w-[9.8rem] w-full text-ellipsis overflow-hidden whitespace-nowrap">
                  {{ item[activeLang] || item.title }}
                </span>
              </div>
              <div>
                {{ item.scanNum }}
                {{ $t('tenThousand') }}
              </div>
           </div>
          </div>
        </template>
      </van-cell>
    </van-cell-group>
  </van-config-provider>
  <van-popup v-model:show="showPicker" round position="bottom">
    <van-picker
      :columns="columns.map(v => ({ text: t(v.text), value: v.value }))"
      @cancel="showPicker = false"
      @confirm="onConfirm"
    />
  </van-popup>
 </div>
</template>
<script setup lang="ts">
import { useI18n } from 'vue-i18n'

import { useUserStore } from "@/store/user"

import { getI18nLanguage, SUPPORT_LOCALES_LIST, useLocales } from '@/i18n'

import { getCategoryItem, propagandaItem } from "@/service/login"

const { t } =  useI18n({ useScope: 'global' })

const themeVars = {
  "cell-background": "#e2e8f0"
}

const active = ref<string>('1')

const user = useUserStore()

const activeLang = computed(() => user.lang.split('-')[0])

const lang = ref<string>(getI18nLanguage(user.lang))

const showPicker = ref<boolean>(false)

const columns = SUPPORT_LOCALES_LIST

const category = ref<Record<string, any>[]>([])

const getCategory = async () => {
  const res = await getCategoryItem({
    tenantId: '10068',
    lang: user.lang.split('-')[0]
  })

  if(!res.success) return 

  category.value = res.data
}

onBeforeMount(() => getCategory())

const list = ref<Record<string, any>[]>([])

const getList = async () => {
  const res = await propagandaItem({
    tenantId: '10068',
    category: active.value
   })
   if(!res.success || !res.data || !category.value.length) return list.value = []

  list.value = (res.data?.records || []).map((v: any) => {
    const langTitleRecord = v.langList.length ? v.langList.reduce((p: any, c: any) => {
      return Object.assign(p, { [c.lang]: c.title })
    }, {}) : {}
    return Object.assign(v, langTitleRecord)
  })
}

onBeforeMount(() => getList())

const handleChange = () => getList()

const onConfirm = ({ selectedValues }: { selectedValues: any[]}) => {
  useLocales(selectedValues[0])
  lang.value = getI18nLanguage(selectedValues[0])
  showPicker.value = false
  getCategory()
  getList()
}

const handleClick = (url: string) => {
  if(!url) return 
  window.open(url)
}
</script>

<style lang="less" scoped>
.lang-btn {
  position: absolute;
  right: 8px;
  top: 8px;
  box-sizing: border-box;
  padding: 6px 10px 6px 14px;
  border: 1px solid #fff;
  border-radius: 200px;
  font-size: 12px;
  font-weight: 500;
  background: #fff;
}
.home-bg{
  background: url('@/assets/images/home-bg.png')no-repeat;
  background-size: 100% 100%;
}
</style>
